<template>
  <div class="modify-teacher">
    <header class="modify-header">
      <div class="left">
        <span class="arrow" @click="$router.back()"><i class="el-icon-arrow-left" />返回</span>
        <span>|</span>
        <span>课程作业</span>
      </div>
      <div class="right">
        课程管理系统
      </div>
    </header>
    <main class="modify-main">
      <div class="tableLab"><el-button type="primary" style="float: right;  margin-left: 15px;" @click="addHandle()">
          + 新增作业
        </el-button> </div>
      <el-table :data="tableData" style="width: 100%" stripe>
        <el-table-column prop="id" label="作业编号" align="center">
        </el-table-column>
        <el-table-column prop="course.courseName" label="课程名称" align="center">
        </el-table-column>
        <el-table-column prop="assignmentType" label="作业类型" align="center">
        </el-table-column>
        <el-table-column prop="assignmentContent" label="作业内容" width="300">
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" align="center">
        </el-table-column>
        <el-table-column prop="endTime" label="截止时间" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" class="blueBug" @click="markHandle(scope.row.id)">
              批改
            </el-button>
            <el-button type="text" size="small" class="blueBug" @click="editHandle(scope.row.id, scope.row)">
              编辑
            </el-button>
            <el-button type="text" size="small" class="blueBug" @click="deleteHandle(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="page" :page-size="size"
        :page-sizes="pageSizes" layout="total, sizes, prev, pager, next, jumper" :total="total" style="float: right;">
      </el-pagination> -->


    </main>
    <!-- <footer class="modify-footer">
        <div class="btn-container">
          <el-button @click="reset()">重置</el-button>
          <el-button type="primary" @click="modifyInfo">确认修改</el-button>
        </div>
      </footer> -->
  </div>
</template>

<script>
import { getAssignmentListAPI, deleteAssignmentAPI } from "@/api/assignment";

export default {
  data() {
    return {
      courseId: '',
      teacherId: '',
      // 获取的作业列表 为全部数据
      assignmentList: [],
      //分页
      page: 1, //第几页
      size: 10, //一页多少条
      total: 0, //总条目数
      pageSizes: [ 5, 10, 20,30], //可选择的一页多少条
      tableData: [], //表格绑定的数据
    }
  },
  created() {
    this.getTabelData2();
  },

  mounted() {
    this.courseId = this.$route.query.courseId
    this.teacherId = this.$route.query.teacherId
    this.getAssignmentList()
  },

  methods: {
    //分页
    //获取表格数据，自行分页(slice)
    getTabelData() {
      //为全部数据
      this.tableData = this.assignmentList.slice(
        (this.page - 1) * this.size,
        this.page * this.size
      );
      this.total = this.assignmentList.length
    },


    //获取表格数据，自行分页（splice）
    getTabelData2() {
      let data = JSON.parse(JSON.stringify(this.assignmentList))
      this.tableData = data.splice(
        (this.page - 1) * this.size,
        this.size
      );
      this.total = this.assignmentList.length
    },
    //page改变时的回调函数，参数为当前页码
    currentChange(val) {
      console.log("翻页，当前为第几页", val);
      this.page = val;
      this.getTabelData2();
    },
    //size改变时回调的函数，参数为当前的size
    sizeChange(val) {
      console.log("改变每页多少条，当前一页多少条数据", val);
      this.size = val;
      this.page = 1;
      this.getTabelData2();
    },
    //获取作业列表
    getAssignmentList() {
      // 只携带课程id，获得该课程所有作业
      // 三可选个Query 参数assignmentId、courseId、teacherId
      getAssignmentListAPI('', this.courseId, '').then((res) => {
        this.assignmentList = res.data
        this.getTabelData()
      }).catch((errpr) => {
        console.log(errpr);
      })
    },
    // 新增作业
    addHandle() {
      this.$router.push({
        path: '/assignments/addAssignment',
        query: {
          courseId: this.courseId, teacherId: this.teacherId,
          assignmentId: '', assignment: {}
        }
      });
    },
    // 编辑
    editHandle(assignmentId, assignment) {
      // console.log(assignment);
      this.$router.push({
        path: '/assignments/addAssignment',
        query: {
          courseId: this.courseId, teacherId: this.teacherId,
          assignmentId: assignmentId, assignment: assignment
        }
      });
    },
    markHandle(assignmentId){
      this.$router.push({
        path: '/submittedAssignments',
        query: {
          assignmentId: assignmentId,
        }
      });
    },
    //删除按钮
    deleteHandle(assignmentId) {
      //删除组长
      this.$confirm('删除作业！！！确认删除该作业,删除后所有学生提交过的本条作业都删除 是否继续?', '确定删除', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteAssignment(assignmentId)
      })
    },
    //删除作业
    deleteAssignment(assignmentId) {
      // 三可选个Query 参数assignmentId、courseId、teacherId
      deleteAssignmentAPI(assignmentId, '', '').then((res) => {
        if (res.code === 200) {
          this.$message.success('删除该作业成功!')
          this.getAssignmentList()
        } else {
          this.$message.error('删除该作业失败！')
        }
      }).catch((error) => {
        console.log(error);
      })
    }

  },
  
}
</script>

<style scoped lang="scss">
.modify-teacher {
  background-color: #f4f6f8;
  height: 100vh;

  .modify-header {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    height: 64px;
    line-height: 64px;
    font-size: 16px;
    font-weight: bold;
    background-color: #fff;

    .left {
      span {
        margin-right: 4px;
      }

      .arrow {
        cursor: pointer;
      }
    }

    .right {
      text-align: right;
    }
  }

  .modify-main {
    background: #f4f6f8;
    padding: 20px 130px;

    .tableLab {
      margin-left: 0;
    }

    .form-container {
      background-color: #fff;
      padding-left: 300px;
      padding-right: 300px;
      padding-bottom: 100px;

      .title {
        height: 60px;
        line-height: 60px;
        padding-left: 20px;
      }

      .form {
        margin-bottom: 20px;
        padding: 20px 65px 24px;

        .el-form {
          display: flex;
          flex-wrap: wrap;

          .el-form-item {
            width: 50%;
          }
        }
      }
    }
  }

  .modify-footer {
    position: fixed;
    bottom: 10px;
    width: 100%;
    padding: 30px 50px;
    color: #000000d9;
    font-size: 18px;
    background: #fff;
    text-align: center;
  }

}
</style>